<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:form id="travelRequestsForm">
			<h:outputText value="Travel Requests" styleClass="outputTextTitle" />
			<h:panelGrid style="width: 100%; text-align: left; ">
		    	<h:outputText value="My Travel Requests" styleClass="outputTextSubTitle" />
 
				<p:dataTable id="travelViewEditTable" style="width: 100%" value="#{travelRequestsBean.myTravelRequests}" var="row"> 
					<p:column style="width: 126px;">
						<f:facet name="header">
							<h:outputText value="Travel Request" />
						</f:facet>
						<h:outputText value="#{row.travelRequestCode}" />
					</p:column>
					<p:column headerText="Travel Period" style="width: 186px;">
						<h:outputLabel value="#{row.periodFrom}" >
							<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{travelRequestsBean.timeZone}" />
						</h:outputLabel>
						<h:outputLabel value="to" style="color: #999999" />
						<h:outputLabel value="#{row.periodTo}" >
							<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{travelRequestsBean.timeZone}" />
						</h:outputLabel>						
					</p:column>
					
					<p:column headerText="Client" >
						<h:outputLabel value="#{row.client}, #{row.clientLocation}" />
					</p:column>
					
					<p:column style="width: 86px;">
						<f:facet name="header">
							<h:outputText value="Travel Type" />
						</f:facet>						
						<h:outputLabel value="#{row.travelType eq 'BOTH DOMESTIC AND OVERSEAS' ? 'BOTH' : row.travelType}" />	
					</p:column>
					
					<p:column style="width: 86px;" >
						<f:facet name="header">
							<h:outputText value="#{msg['travelstatus.label']}" />
						</f:facet>
						<h:outputText value="#{row.travelStatus}" />
					</p:column>
					
					<p:column style="width: 66px; text-align: center;">						
						<p:commandButton icon="ui-icon-search" action="#{travelRequestsBean.viewOrEditTravelRequest}" oncomplete="dialog.show()" update="@form">
							<f:setPropertyActionListener target="#{travelRequestsBean.travelRequest}" value="#{row}"></f:setPropertyActionListener>
						</p:commandButton>
					</p:column>
				</p:dataTable>
			 
			<h:outputText value="Travel Requests (for approval)" styleClass="outputTextSubTitle" />
			<p:dataTable id="travelViewTable" style="width: 100%" value="#{travelRequestsBean.travelRequests}" var="row">
					<p:column style="width: 126px;">
						<f:facet name="header">
							<h:outputText value="Travel Request" />
						</f:facet>
						<h:outputText value="#{row.travelRequestCode}" />
					</p:column>
					<p:column headerText="Travel Period" style="width: 186px;">
						<h:outputLabel value="#{row.periodFrom}" >
							<f:convertDateTime pattern="dd-MMM-yyyy" />
						</h:outputLabel>
						<h:outputLabel value="to" style="color: #999999" />
						<h:outputLabel value="#{row.periodTo}" >
							<f:convertDateTime pattern="dd-MMM-yyyy" />
						</h:outputLabel>						
					</p:column>
					
					<p:column headerText="Client" >
						<h:outputLabel value="#{row.client}, #{row.clientLocation}" />
					</p:column>
					
					<p:column style="width: 86px;">
						<f:facet name="header">
							<h:outputText value="Travel Type" />
						</f:facet>						
						<h:outputLabel value="#{row.travelType eq 'BOTH DOMESTIC AND OVERSEAS' ? 'BOTH' : row.travelType}" />	
					</p:column>
					
					<p:column style="width: 86px;" >
						<f:facet name="header">
							<h:outputText value="#{msg['travelstatus.label']}" />
						</f:facet>
						<h:outputText value="#{row.travelStatus}" />
					</p:column>
					
					<p:column style="width: 66px; text-align: center;">						
						<p:commandButton icon="ui-icon-search" action="#{travelRequestsBean.viewOrEditTravelRequest}" oncomplete="dialog.show()" update="@form">
							<f:setPropertyActionListener target="#{travelRequestsBean.travelRequest}" value="#{row}"></f:setPropertyActionListener>
						</p:commandButton>
					</p:column>
				</p:dataTable>
			</h:panelGrid>
			
			<p:dialog widgetVar="dialog" resizable="false"  header="Travel Request - #{travelRequestsBean.travelRequest.travelRequestCode} - View">
				<f:ajax event="close" listener="#{travelRequestsBean.onCloseDialog}" ></f:ajax>
				<h:panelGrid id="dialogContent" style="font-size: 0.86em " cellspacing="5" >  
					<h:panelGrid columns="9" 
						columnClasses="employeeDetail6GridsCell1, gridCellMiddleLeftAligned, employeeDetail6GridsCell2, employeeDetail6GridsCell1, gridCellMiddleLeftAligned, employeeDetail6GridsCell2, employeeDetail6GridsCell1, gridCellMiddleLeftAligned"
						style="width: 100%; background-color: #FFE4C4; border: 1px solid #F5AD66;">
						<h:outputLabel value="Travel Request Code" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{travelRequestsBean.travelRequest.travelRequestCode}" styleClass="wamOutputLebel" style="font-weight: bold; color: #7892B7"/>

						<h:outputLabel value="#{msg['employeename.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{travelRequestsBean.travelRequest.employee.firstName} #{travelRequestsBean.travelRequest.employee.lastName}"
							styleClass="wamOutputLebel" />

						<h:outputLabel value="Employee Code" />
						<h:outputLabel value=":" />						
						<h:outputLabel value="#{travelRequestsBean.travelRequest.employee.employeeCode}"
							styleClass="wamOutputLebel" />

						<h:outputLabel value="#{msg['contactnumber.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{travelRequestsBean.travelRequest.employee.telephone}" 
							styleClass="wamOutputLebel" />

						<h:outputLabel value="#{msg['approvalby.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{travelRequestsBean.travelRequest.approver.firstName} #{travelRequestsBean.travelRequest.approver.lastName}" styleClass="wamOutputLebel" />

						<h:outputLabel value="Requested Date" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{travelRequestsBean.travelRequest.requestDate}"
							styleClass="wamOutputLebel">
							<f:convertDateTime pattern="dd-MMM-yyyy" />
						</h:outputLabel>
					</h:panelGrid>
					
					<h:outputLabel value="Travel Details" styleClass="outputTextSubTitle" />
		            
		            <h:panelGrid columns="9" rendered="#{travelRequestsBean.travelRequest.travelType eq 'DOMESTIC'}"
						columnClasses="grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned "
						style="width: 100%">
						<h:outputLabel value="#{msg['modeoftransport.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 136px;" value="#{travelRequestsBean.travelRequest.travelMode}">
							<f:selectItems value="#{travelRequestsBean.travelModesMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['natureofwork.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width:136px" value="#{travelRequestsBean.travelRequest.natureOfWork}">
							<f:selectItems value="#{travelRequestsBean.natureOfWorksMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask value="#{travelRequestsBean.travelRequest.emergencyContact}" mask="(999) 999-9999"/>  
						

						<h:outputLabel value="Start Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{travelRequestsBean.travelRequest.periodFrom}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="From City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFrom_DO}" />

						<h:outputLabel value="From Country" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFromCountry_DO}" />

						<h:outputLabel value="Return Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{travelRequestsBean.travelRequest.periodTo}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="To City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelTo_DO}" />

						<h:outputLabel value="To Country" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelToCountry_DO}" />

						<h:outputLabel value="#{msg['clientname.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.client}" />

						<h:outputLabel value="#{msg['clientlocation.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.clientLocation}" />

						<p:spacer />
						<p:spacer />
						<p:spacer />
						
						<h:outputLabel value="#{msg['advancerequired.label']} (INR)" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredDOINR" value="#{travelRequestsBean.travelRequest.advancePaymentINR}" mask="99999.99" >
							<f:convertNumber minIntegerDigits="5" minFractionDigits="2" />
							<p:watermark for="advanceRequiredDOINR" value="00000.00" />
						</p:inputMask>  
							
 					</h:panelGrid> 
 					
 					<!-- Overseas -->
					<h:panelGrid columns="9" rendered="#{travelRequestsBean.travelRequest.travelType eq 'OVERSEAS'}"
						columnClasses="grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned "
						style="width: 100%">
						<h:outputLabel value="#{msg['modeoftransport.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 136px;" value="#{travelRequestsBean.travelRequest.travelMode}">
							<f:selectItems value="#{travelRequestsBean.travelModesMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['natureofwork.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width:136px" value="#{travelRequestsBean.travelRequest.natureOfWork}">
							<f:selectItems value="#{travelRequestsBean.natureOfWorksMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask value="#{travelRequestsBean.travelRequest.emergencyContact}" mask="(999) 999-9999"/>  
						

						<h:outputLabel value="Start Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{travelRequestsBean.travelRequest.periodFrom}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="Form City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFrom_OS}" />

						<h:outputLabel value="Form Country" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFromCountry_OS}" />

						<h:outputLabel value="Return Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{travelRequestsBean.travelRequest.periodTo}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="To City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelTo_OS}" />

						<h:outputLabel value="To Country" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelToCountry_OS}" />

						<h:outputLabel value="#{msg['clientname.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.client}" />

						<h:outputLabel value="#{msg['clientlocation.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.clientLocation}" />

						<p:spacer />
						<p:spacer />
						<p:spacer />
						
						<h:outputLabel value="#{msg['advancerequired.label']} (INR)" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredOSINR" value="#{travelRequestsBean.travelRequest.advancePaymentINR}" mask="99999.99" >
							<f:convertNumber minIntegerDigits="5" minFractionDigits="2" />
							<p:watermark for="advanceRequiredOSINR" value="00000.00" />
						</p:inputMask>  
						
						<h:outputLabel value="#{msg['advancerequired.label']} (USD)"  />
						<h:outputLabel value=":"  />
						<p:inputMask id="advanceRequiredOSUSD" value="#{travelRequestsBean.travelRequest.advancePaymentUSD}" mask="99999.99"  >
							<f:convertNumber minIntegerDigits="5" minFractionDigits="2" />
							<p:watermark for="advanceRequiredOSUSD" value="00000.00" />
						</p:inputMask>						
 					</h:panelGrid> 
 					
 					<!-- BOTH -->
					<h:panelGrid columns="6" style="width: 100% " rendered="#{travelRequestsBean.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}"
						columnClasses="">
						
						<h:outputLabel value="#{msg['modeoftransport.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 136px; " value="#{travelRequestsBean.travelRequest.travelMode}">
							<f:selectItems value="#{travelRequestsBean.travelModesMap}" />
						</p:selectOneMenu>

						<p:spacer />
						<p:spacer />
						<p:spacer />

						<h:outputLabel value="#{msg['natureofwork.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width:136px" value="#{travelRequestsBean.travelRequest.natureOfWork}" >
							<f:selectItems value="#{travelRequestsBean.natureOfWorksMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask value="#{travelRequestsBean.travelRequest.emergencyContact}" mask="(999) 999-9999">
							
						</p:inputMask>

						<h:outputLabel value="Start Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{travelRequestsBean.travelRequest.periodFrom}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="Return Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{travelRequestsBean.travelRequest.periodTo}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="Form City (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFrom_DO}" />

						<h:outputLabel value="Form Country (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFromCountry_DO}" />

						<h:outputLabel value="To City (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelTo_DO}" />

						<h:outputLabel value="To Country (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelToCountry_DO}" />

						<h:outputLabel value="Form City (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFrom_OS}" />

						<h:outputLabel value="Form Country (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelFromCountry_OS}" />

						<h:outputLabel value="To City (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelTo_OS}" />

						<h:outputLabel value="To Country (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.travelToCountry_OS}" />

						<h:outputLabel value="#{msg['clientname.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.client}" />

						<h:outputLabel value="#{msg['clientlocation.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{travelRequestsBean.travelRequest.clientLocation}" />

						<h:outputLabel value="#{msg['advancerequired.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredINRDNO" value="#{travelRequestsBean.travelRequest.advancePaymentINR}" mask="99999.99" >
							<f:convertNumber minIntegerDigits="5" minFractionDigits="2" />
							<p:watermark for="advanceRequiredINRDNO" value="00000.00" />
						</p:inputMask>
						
							
						<h:outputLabel value="#{msg['advancerequired.label']} (USD)" >
						</h:outputLabel>
						<h:outputLabel value=":" /> 
						<p:inputMask id="advanceRequiredUSDDNO" value="3333" mask="99999.99">
							<f:convertNumber minIntegerDigits="5" minFractionDigits="2" />
							<p:watermark for="advanceRequiredUSDDNO" value="00000.00" />
						</p:inputMask>
						
						
					</h:panelGrid> 
					

					<h:outputLabel value="Travel Logistics" styleClass="outputTextSubTitle" />
				<p:scrollPanel style="width: 800px;height:140px">
					<p:dataTable style="width: 100%; " value="#{travelRequestsBean.travelLogistics}" var="row" sortBy="#{row.logistics.logisticsFor}" sortOrder="ascending" >
						<p:column style="width: 200px;" sortBy="#{row.logistics.displayName}">
							<h:outputLabel value="#{row.logistics.displayName}" />
						</p:column>
						<p:column headerText="Reimbursed By" style="width: 146px;"> 
							<p:selectOneMenu style="width: 136px" id="reimbyrsedByMenu" styleClass="selectOneMenu168pxFixedWidth" value="#{row.byWhom}">
								<f:selectItem itemLabel="" itemValue=""/>
								<f:selectItems value="#{travelRequestsBean.reimbursedByMap}" />
							</p:selectOneMenu>
							<p:watermark for="reimbyrsedByMenu" value="Reimbursed by" />
						</p:column>
						
						<p:column headerText="Logistics for" style="width: 136px;" sortBy="#{row.logistics.logisticsFor}">
							<h:outputLabel id="logisticsFor" value="#{row.logistics.logisticsFor} TRAVELS" />							
						</p:column> 
						
						<p:column headerText="Remarks">
							<p:inputTextarea id="remarks" cols="30" rows="1" style="width: 96%" value="#{row.remarks}" />
							<p:watermark for="remarks" value="Remarks" />
						</p:column>
					</p:dataTable>
</p:scrollPanel>					
		        </h:panelGrid>  

				<h:panelGrid columns="2" columnClasses="gridCellTopLeftAligned, gridCellTopLeftAligned" cellspacing="5" rendered="#{travelRequestsBean.travelRequest.approver.employeeId eq WAMUSER.employee.employeeId}">
		        	<h:outputText value="Approval comment:" /> 
		        	<p:inputTextarea id="comment" value="#{travelRequestsBean.travelRequest.approvalComments}" style="width: 300px;"> 
		        		<p:watermark for="comment" value="Enter a comment" />
		        	</p:inputTextarea>
		        </h:panelGrid>
		        		        
		        <h:panelGrid style="padding-top: 5px; width: 100%; border-top: 1px solid #d9d9d9" columnClasses="gridCellMiddleRightAligned" >
		        	<h:panelGroup>
		        	<p:commandButton id="updateButton" value="Update" actionListener="#{travelRequestsBean.updateTravelRequest}" update="growl" rendered="#{travelRequestsBean.travelRequest.employee.employeeId eq WAMUSER.employee.employeeId and (travelRequestsBean.travelRequest.travelStatus eq 'REJECTED')}" /> 
		        	<p:commandButton id="approveButton" value="Approve" actionListener="#{travelRequestsBean.approveTravelRequest}" update="growl" rendered="#{travelRequestsBean.travelRequest.approver.employeeId eq WAMUSER.employee.employeeId and (travelRequestsBean.travelRequest.travelStatus eq 'IN PROCESS')}" />
		        	<p:commandButton id="rejectButton" value="Reject" actionListener="#{travelRequestsBean.rejectTravelRequest}" update="growl" rendered="#{travelRequestsBean.travelRequest.approver.employeeId eq WAMUSER.employee.employeeId and (travelRequestsBean.travelRequest.travelStatus eq 'IN PROCESS')}" />
		        	<p:commandButton id="closeButton" process="@this" value="Close" actionListener="#{travelRequestsBean.dialogClose}" update="@form"/>
		        	</h:panelGroup>
		        </h:panelGrid>
			</p:dialog>	
			<p:growl id="growl" />
		</h:form>
	</ui:define>
</ui:composition>

